<template>
    <div>
        <div>
            <mt-header title="我的个人中心">
                <router-link to="/" slot="left">
                    <mt-button icon="back">返回</mt-button>
                </router-link>
                <mt-button icon="more" slot="right"></mt-button>
            </mt-header>
        </div>
        <!--没有它 底部会拉到屏幕下面-->
        <van-pull-refresh style="height: 670px" class="cell" v-model="refreshing" @refresh="onRefresh">

            <el-card style="width: 360px; margin-left: 6px; border-radius: 10px; margin-top: 10px" class="box-card">
                <div slot="header" class="clearfix">
                    <span>我的信息</span>
                    <el-button  @click="$router.push('/login')" style="float: right; padding: 3px 0" type="text">切换账号登录</el-button>
                </div>

                <div style="margin-left: 20px; width: 500px; height: 100px">
                    <van-image
                            style="float: left;margin-top: 10px"
                            round
                            width="4rem"
                            height="4rem"
                            :src="currentAvatar === '' ? defaultAvatar : currentAvatar"
                    />
                    <div style="float: left; width: 180px">
                        <div style="float: left; width: 180px;margin-top: 14px">
                            <van-tag style="margin-left: 20px" @click="$router.push('/login')" plain type="primary">{{online === true ? user.userName : '登录'}}/{{online === true ? '切换账户':'注册'}}</van-tag>
                        </div>
                        <div style="float: left; width: 200px; margin-top: 12px">
                            <van-tag style="margin-left: 20px" round type="primary">{{online === true ? '在线' : '未登录'}}</van-tag>
                        </div>
                    </div>
                    <div style="float: left; width: 100px;">
                        <van-icon @click="$router.push('/login')" style="margin-top: 30px; margin-left:20px;" size="large" name="arrow" />
                    </div>
                </div>

                <div style="width: 500px; height: 40px">
                    <div style="width: 60px;height: 40px;float: left; margin-left: 10px;text-align: center">
                <span style="float: left; width: 60px; margin-left: 20px">
                    36%
                </span>
                        <span style="float: left; width: 60px; margin-left: 20px;font-size: 14px;margin-top: 6px">
                    信用值
                </span>
                    </div>
                    <div style="width: 60px;height: 40px;float: left;margin-left: 10px;text-align: center">
                <span style="float: left; width: 60px; margin-left: 20px">
                    {{ alreadyCreditTotalMoney }}
                </span>
                        <span style="float: left; width: 60px; margin-left: 20px;font-size: 14px;margin-top: 6px">
                    贷款金额
                </span>
                    </div>
                    <div style="width: 60px;height: 40px;float: left; margin-left: 10px;text-align: center">
                <span style="float: left; width: 60px; margin-left: 20px">
                    {{ alreadyRepayTotalMoney }}
                </span>
                        <span style="float: left; width: 60px; margin-left: 20px;font-size: 14px;margin-top: 6px">
                    还款金额
                </span>
                    </div>
                    <div style="width: 60px;height: 40px;float: left; margin-left: 10px;text-align: center">
                <span style="float: left; width: 60px; margin-left: 20px">
                    {{ creditCount }}
                </span>
                        <span style="float: left; width: 60px; margin-left: 20px;font-size: 14px;margin-top: 6px">
                    贷款总数
                </span>
                    </div>
                </div>
            </el-card>

            <div style="width: 360px; margin-top: 8px; margin-left: -3px">
                <van-list style="height: 300px; width: 360px">
                    <van-cell style="margin-left:10px;" v-for="item in list" :key="item" :title="item.title" is-link :to="item.path" />
                </van-list>
            </div>

        </van-pull-refresh>
    </div>
</template>

<script>

    import axios from 'axios'

    import DefaultAvatar from '../assets/默认图像.jpg'
    import Toast from "vant/lib/toast";
    import Notify from "vant/lib/notify";

    export default {
        data() {
            return{
                currentAvatar: '',
                defaultAvatar: DefaultAvatar,
                creditCount: 0,
                alreadyCreditTotalMoney: 0,
                alreadyRepayTotalMoney: 0,
                online: false,
                user: '',
                list: [
                    {'title': '还款记录', 'path': '/repay'},
                    {'title': '贷款进度', 'path': '/progress'},
                    {'title': '贷款信息', 'path': '/credit'},
                    {'title': '还款累计', 'path': '/count'},
                    {'title': '返校校验码', 'path': '/reback'},
                    {'title': '贷款指南', 'path': '/guide'},
                    {'title': '还款指南', 'path': '/reguide'},
                    {'title': '退出', 'path': '/login'},
                ],
                show: false,
                loading: false,
                finished: false,
                refreshing: false,
            }
        },
        mounted() {
            if (sessionStorage.getItem('token') === null) {
                Notify({ type: 'danger', message: '请先登录' });
            }
            axios.get('http://124.70.180.155:8080/system/user/profile',
                {
                    headers: { Authorization: sessionStorage.getItem('token')}
                }).then(res => {
                console.log(res.data.data)
                this.user = res.data.data
                if (this.user !== null) {
                    this.online = true
                    this.currentAvatar = 'https://tlgen.github.io/cat.jpg'
                }
                axios.get('http://124.70.180.155:8080/repay/data/selectPayOrderListBySysUser/' + this.user.userName,
                    {
                        headers: { Authorization: sessionStorage.getItem('token')}
                    }).then(res => {
                    console.log(res)
                    console.log('已贷款的总金额为' + res.data.creditMoney)
                    console.log('已还款的总金额为' + res.data.totalMoney)
                    this.alreadyCreditTotalMoney = res.data.creditMoney
                    this.alreadyRepayTotalMoney = res.data.totalMoney
                })
                axios.get('http://124.70.180.155:8080/student/credit/data/name/' + this.user.userName,
                    {
                        headers: { Authorization: sessionStorage.getItem('token')}
                    }).then(res => {
                    this.creditCount = res.data.data.length
                })
            })
        },
        methods: {
            showDetail() {
                this.show = true
            },
            onRefresh() {
                setTimeout(() => {
                    Toast('刷新成功')
                    if (sessionStorage.getItem('token') === null) {
                        Notify({ type: 'danger', message: '请先登录' });
                    }
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
        },
    }
</script>

<style scoped>
.box-card {
    background-image: url("../assets/渐变色.jpg");
}
.cell {
    background-image: url("../assets/列表背景色.jpg");
}
</style>
